<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Alarm clock</title>
    <link rel="stylesheet" type="text/css" href="css3clock.css" />
<style type="text/css">

#jsalarmclock{
font-family: Tahoma;
font-weight: bold;
font-size: 12px;
}

#jsalarmclock div{
margin-bottom: 0.8em;
}

#jsalarmclock div.leftcolumn{
float: left;
width: 150px;
font-size: 13px;
background-color: lightyellow;
clear: left;
}

#jsalarmclock span{
margin-right: 5px;
}

</style>

<script type="text/javascript">

/***********************************************

* JavaScript Alarm Clock- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more

***********************************************/

var jsalarm={
  padfield:function(f){
    return (f<10)? "0"+f : f
  },
  showcurrenttime:function(){
    var dateobj=new Date()
    var ct=this.padfield(dateobj.getHours())+":"+this.padfield(dateobj.getMinutes())+":"+this.padfield(dateobj.getSeconds())
    this.ctref.innerHTML=ct
    this.ctref.setAttribute("title", ct)
    if (typeof this.hourwake!="undefined"){ //if alarm is set
      if (this.ctref.title==(this.hourwake+":"+this.minutewake+":"+this.secondwake)){
        clearInterval(jsalarm.timer)
        window.location=document.getElementById("musicloc").value
      }
    }
  },
  init:function(){
    var dateobj=new Date()
    this.ctref=document.getElementById("jsalarm_ct")
    this.submitref=document.getElementById("submitbutton")
    this.submitref.onclick=function(){
      jsalarm.setalarm()
      this.value="Alarm Set"
      this.disabled=true
      return false
    }
    this.resetref=document.getElementById("resetbutton")
    this.resetref.onclick=function(){
    jsalarm.submitref.disabled=false
    jsalarm.hourwake=undefined
    jsalarm.hourselect.disabled=false
    jsalarm.minuteselect.disabled=false
    jsalarm.secondselect.disabled=false
    return false
    }
    var selections=document.getElementsByTagName("select")
    this.hourselect=selections[0]
    this.minuteselect=selections[1]
    this.secondselect=selections[2]
    for (var i=0; i<60; i++){
      if (i<24) //If still within range of hours field: 0-23
      this.hourselect[i]=new Option(this.padfield(i), this.padfield(i), false, dateobj.getHours()==i)
      this.minuteselect[i]=new Option(this.padfield(i), this.padfield(i), false, dateobj.getMinutes()==i)
      this.secondselect[i]=new Option(this.padfield(i), this.padfield(i), false, dateobj.getSeconds()==i)

    }
    jsalarm.showcurrenttime()
    jsalarm.timer=setInterval(function(){jsalarm.showcurrenttime()}, 1000)
  },
  setalarm:function(){
    this.hourwake=this.hourselect.options[this.hourselect.selectedIndex].value
    this.minutewake=this.minuteselect.options[this.minuteselect.selectedIndex].value
    this.secondwake=this.secondselect.options[this.secondselect.selectedIndex].value
    this.hourselect.disabled=true
    this.minuteselect.disabled=true
    this.secondselect.disabled=true
  }
}

  </script>
</head>

<body>

  <h3>Go URL</h3>
  <p>
    This will fire off a page hit when the timer triggers.
  </p>

<form action="" method="">
<div id="jsalarmclock">
<div><div class="leftcolumn">Current Time:</div> <span id="jsalarm_ct" style="letter-spacing: 2px"></span></div>
<div><div class="leftcolumn">Set Alarm:</div> <span><select></select> Hour</span> <span><select></select> Minutes</span> <span><select></select> Seconds</span></div>
<div><div class="leftcolumn">Set Alarm Action:</div> <input type="text" id="musicloc" size="55" value="http://www.youtube.com/watch?v=u_DogLZMCgs" /> <span style="font: normal 11px Tahoma">Downtemplo</span></div>
<input type="submit" value="Set Alarm!" id="submitbutton" /> <input type="reset" value="reset" id="resetbutton" />
</div>
</form>

<script type="text/javascript">
  jsalarm.init()
</script>

<h3> one is not enough </h3>
<p>
  .
  .
  .
  .
  .
</p>

<div id="liveclock" class="outer_face">

<div class="marker oneseven"></div>
<div class="marker twoeight"></div>
<div class="marker fourten"></div>
<div class="marker fiveeleven"></div>

<div class="inner_face">
<div class="hand hour"></div>
<div class="hand minute"></div>
<div class="hand second"></div>
</div>

</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">

/***********************************************
* CSS3 Analog Clock- by JavaScript Kit (www.javascriptkit.com)
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
***********************************************/

var $hands = $('#liveclock div.hand')

window.requestAnimationFrame = window.requestAnimationFrame
                               || window.mozRequestAnimationFrame
                               || window.webkitRequestAnimationFrame
                               || window.msRequestAnimationFrame
                               || function(f){setTimeout(f, 60)}


function updateclock(){
  var curdate = new Date()
  var hour_as_degree = ( curdate.getHours() + curdate.getMinutes()/60 ) / 12 * 360
  var minute_as_degree = curdate.getMinutes() / 60 * 360
  var second_as_degree = ( curdate.getSeconds() + curdate.getMilliseconds()/1000 ) /60 * 360
  $hands.filter('.hour').css({transform: 'rotate(' + hour_as_degree + 'deg)' })
  $hands.filter('.minute').css({transform: 'rotate(' + minute_as_degree + 'deg)' })
  $hands.filter('.second').css({transform: 'rotate(' + second_as_degree + 'deg)' })
  requestAnimationFrame(updateclock)
}

requestAnimationFrame(updateclock)
</script>

</body>

